<template>
  <div class="index">
    <div class="header">
      <img :src="`${$router.options.base}img/nav-img.png`"
           alt=""
           width="100%"
           height="220px">
      <div class="title">
        <p>
          BIM-VIEW-大屏设计器<br />
          <small>可视化数据大屏{{$website.isDemo?'（演示环境-请勿放生产数据）':''}}</small>
        </p>
      </div>
      <div class="user-info">
        <el-dropdown >
          <el-avatar icon="el-icon-user-solid">

          </el-avatar>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="openUserInfo">用户信息</el-dropdown-item>
            <el-dropdown-item @click.native="userUpdatePwdShow = true">修改密码</el-dropdown-item>
            <el-dropdown-item @click.native="logout">登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <span class="user-name">{{name}}</span>
      </div>
      <navs @change="handleChange"></navs>
    </div>
    <div class="main"
         v-if="activeName==0">
      <list></list>
    </div>
    <el-scrollbar class="main">
      <category v-if="activeName==1"></category>
      <db v-else-if="activeName==2"></db>
      <project v-else-if="activeName==3"></project>
      <maps v-else-if="activeName==4"></maps>
    </el-scrollbar>
    <el-dialog title="用户信息"
               append-to-body
               :close-on-click-modal="false"
               :visible.sync="userInfoShow"
               width="50%">
      <avue-form :option="newInfoOption"
                 ref="newInfo"
                 v-model="newInfo"
                 @submit="confirmSave"></avue-form>
    </el-dialog>
    <el-dialog title="修改密码"
               :close-on-click-modal="false"
               :visible.sync="userUpdatePwdShow"
               width="50%">
      <avue-form :option="pwdUpdateOption"
                 ref="pwdForm"
                 v-model="pwdUpdateForm"
                 @submit="confirmUpdatePwd"></avue-form>
    </el-dialog>
  </div>
</template>
<script>
import list from './list/index'
import maps from './list/map'
import category from './list/category'
import project from "@/page/list/project";
import db from './list/db'
import navs from './nav/index'
import {mapGetters} from "vuex";
import store from "@/store";
import {updateUserInfo, updateUserPwd} from "@/api/login";
import crypto from "@/utils/crypto";
export default {
  name: "index",
  components: {
    navs,
    list,
    maps,
    category,
    db,
    project
  },
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.pwdUpdateForm.confirmNewPwd !== '') {
          this.$refs.pwdForm.validateField('confirmNewPwd');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.pwdUpdateForm.newPwd) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
    return {
      activeName: 0,
      userInfoShow: false,
      userUpdatePwdShow: false,
      newInfoOption:{
        submitText: '确认修改',
        emptyBtn: false,
        column: [{
          label: '账号',
          prop: 'account',
          disabled: true,
          span: 24,
          labelWidth: 150,
          rules: [{
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }]
        }, {
          label: '昵称',
          span: 24,
          labelWidth: 150,
          prop: 'name',
          rules: [{
            required: true,
            message: "请输入昵称",
            trigger: "blur"
          }]
        }, {
          label: '邮箱',
          span: 24,
          labelWidth: 150,
          prop: 'email',
          rules: [{
            required: true,
            message: "请输入邮箱",
            trigger: "blur"
          },{
            type: 'email',
            message: "邮箱格式不合法",
            trigger: "blur"
          }]
        }]
      },
      newInfo: {},
      pwdUpdateForm: {},
      pwdUpdateOption:{
        submitText: '确认修改',
        emptyBtn: false,
        column: [{
          label: '旧密码',
          type: 'password',
          prop: 'oldPwd',
          span: 24,
          labelWidth: 150,
          rules: [{required: true, message: "旧密码不能为空", trigger: "blur"}]
        },{
          label: '新密码',
          type: 'password',
          prop: 'newPwd',
          span: 24,
          labelWidth: 150,
          rules: [{required: true, message: "新密码不能为空", trigger: "blur"},
            {validator: validatePass, trigger: 'blur'}]
        },{
          label: '确认新密码',
          type: 'password',
          prop: 'confirmNewPwd',
          span: 24,
          labelWidth: 150,
          rules: [{required: true, message: '请确认新密码', trigger: 'blur'},
            {validator: validatePass2, trigger: 'blur', required: true}]
        }]
      }
    }
  },
  methods: {
    handleChange (nav, index) {
      if (index === 6) {
        window.open('https://avuejs.com/views/vip.html', '_blank')
      } else {
        this.activeName = index;
      }
    },
    logout(){
      store.dispatch('Logout').then(res => {
        if(res.data.code ===0){
          this.$message.success("退出成功！")
          window.sessionStorage.removeItem('nav-index')
          console.log("退出成功")
          this.$router.push({name:'login'})
        }
      })
    },
    openUserInfo(){
      this.userInfoShow =true
      this.newInfo = this.deepClone(this.userInfo)
    },
    confirmSave(form,done){
      this.$refs.newInfo.validate(valid => {
        if (valid) {
          updateUserInfo(this.newInfo).then(res=>{
            done()
            if(res.data.code ===0) {
              this.$message.success("修改用户信息成功")
              store.dispatch('GetUserInfo')
              this.userInfoShow =false
            }else{
              this.$message.error(res.data.msg)
            }

          })
        } else {
          return false;
        }
      });
    },
    confirmUpdatePwd(form,done){
      this.$refs.pwdForm.validate(valid => {
        if (valid) {
          updateUserPwd({
            oldPwd: crypto.encrypt(this.pwdUpdateForm.oldPwd),
            newPwd: crypto.encrypt(this.pwdUpdateForm.newPwd)
          }).then(res=>{
            done()
            if(res.data.code ===0){
              this.$message.success("修改用户密码成功")
              store.dispatch('Logout')
              this.userUpdatePwdShow =false
              this.$router.push({name:'login'})
            }else{
              this.$message.error(res.data.msg)
            }

          })
        } else {
          return false;
        }
      });
    }
  },
  computed:{
    ...mapGetters(['name','userInfo'])
  }
}
</script>
<style lang="scss">
.index {
  height: 100%;
  .header {
    position: relative;
    .nav {
      margin: 0 20px;
      width: 100%;
      position: absolute;
      bottom: 10px;
      border: none;
      .el-menu-item {
        background-color: rgba(0, 0, 0, 0) !important;
      }
    }
    .title {
      position: absolute;
      top: 60px;
      left: 20px;
      font-size: 48px;
      font-style: oblique;
      color: rgb(0, 186, 255);
      font-weight: bold;
      line-height: 35px;
    }
    .title small {
      font-size: 18px;
      color: #9cb4c2;
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 220px);
  }
  .user-info{
    position: absolute;
    right: 0;
    top: 20px;
    width: 200px;
    line-height: 45px;
    color: white;
    font-size: 18px;
    .user-name{
      padding: 0 10px;
      position: fixed;
      font-size: 18px;
    }
  }
  .custom-tree {
    .is-expanded,.is-focusable {
      >.el-tree-node__content {
        background: transparent;
      }
    }
    .el-tree-node__content:hover {
      background: rgba(43, 52, 67, .7);
    }
    .is-current {
      >.el-tree-node__content {
        background: rgba(63, 81, 181, .4)!important;
      }
    }
  }
}
</style>
